/* 重置浏览器css样式 */
@import url("./assets/css/reset.css");

* {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif, "Microsoft YaHei";
  font-size: 14px;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* 配置常用的flex布局 */
.f {
  &dc {
    flex-direction: column;
  }

  &c {
    &c {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    &s {
      display: flex;
      justify-content: center;
      align-items: flex-start;
    }
  }

  &s {
    &c {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }

    &s {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
    }
  }

  &pa {
    &c {
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

    &s {
      display: flex;
      justify-content: space-around;
      align-items: flex-start;
    }
  }

  &pb {
    &c {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    &s {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }
  }

  &pe {
    &c {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
    }

    &s {
      display: flex;
      justify-content: space-evenly;
      align-items: flex-start;
    }
  }

  &w {
    //换行
    flex-wrap: wrap;
  }

  &d_col {
    //column布局
    display: flex;
    flex-direction: column;
  }

  &_nos {
    //取消缩放
    flex-shrink: 0;
  }

  &_nog {
    //取消放大
    flex-grow: 0;
  }

  &_nosg {
    //取消缩放和放大
    flex-shrink: 0;
    flex-grow: 0;
  }
}

/* position 常用定位 */
.p {
  &r {
    position: relative;
  }

  &a {
    position: absolute;
  }

  &f {
    position: fixed;
  }

  &s {
    position: sticky;
  }
}

//设置倒影
.box_ref {
  -webkit-box-reflect: below 1px -webkit-linear-gradient(transparent, transparent
        90%, rgba(255, 255, 255, 0.3));
}

//设置指标的显示
.cur {
  &_p {
    cursor: pointer;
  }

  &_n_a {
    //禁止操作提示
    cursor: not-allowed;
  }

  &_m {
    //可移动
    cursor: move;
  }
}

//设置文字hover时样式为underline
.td_u {
  &:hover {
    text-decoration: underline;
  }
}

//设置不可选中
.user_ns {
  user-select: none;
}

//设置常用display
.d {
  &_ib {
    display: inline-block;
  }

  &_i {
    display: inline-block;
  }

  &_b {
    display: block;
  }

  &_f {
    display: flex;
  }

  &_wk_b {
    display: -webkit-box;
  }
}

.m {
  &5 {
    margin: 5px;
  }

  &10 {
    margin: 10px;
  }

  &r {
    &5 {
      margin-right: 5px;
    }

    &10 {
      margin-right: 10px;
    }
  }

  &l {
    &5 {
      margin-left: 5px;
    }

    &10 {
      margin-left: 10px;
    }
  }

  &t {
    &5 {
      margin-top: 5px;
    }

    &10 {
      margin-top: 10px;
    }
  }

  &b {
    &5 {
      margin-bottom: 5px;
    }

    &10 {
      margin-bottom: 10px;
    }
  }
}

//单行文字溢出处理(需要指定宽度,不能使用百分比)
.t_ovl1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

//mask 全屏遮罩
.m-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1001;
}

$--fixed_width: 980px; //内容的宽度
$--head_color: #242424; //头部的背景色
$--content_color: #f5f5f5; //中间内容的背景色
$--foot_color: #f2f2f2; //脚步的背景色

.page {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;

  &::-webkit-scrollbar {
    display: none;
  }

  @extend .fss;
  flex-direction: column;

  .page-head {
    width: 100%;
    background-color: $--head_color;
    @extend .fcc;
  }

  .page-content {
    // min-height: calc(100vh - 243px);
    flex: 1;
    width: 100%;
    background-color: $--content_color;
    @extend .fcs;

    & .content-tabline {
      width: 982px;
      min-height: calc(100vh - 283px);
      border-left: 1px solid #d3d3d3;
      border-right: 1px solid #d3d3d3;
      background: #fff;
      overflow: hidden;
    }

    & .content-normal {
      width: 982px;
      min-height: calc(100vh - 248px);
      border-left: 1px solid #d3d3d3;
      border-right: 1px solid #d3d3d3;
      background: #fff;
      overflow: hidden;
    }

    /* .full {
      width: $--fixed_width;
      height: 100%;
    } */
  }

  .page-foot {
    width: 100%;
    height: 173px;
    background-color: $--foot_color;
    @extend .fcs;
    border-top: 1px solid #d3d3d3;
  }
}

/* 
  一些需要复用的icon图标
*/

//获取方法
@mixin get_icon($x, $y, $size_x, $size_y) {
  @if ($size_x== "auto") {
    width: auto;
  } @else {
    width: #{$size_x}px;
  }

  height: #{$size_y}px;
  background-position: #{$x}px #{$y}px;
}

//获取方法，区别在于可以可以指定用哪个img，有无hover（不填则无）
@mixin get_btn(
  $extendClassIndex,
  $x_f,
  $y_f,
  $size_x_f,
  $size_y_f,
  $x_n: false,
  $y_n: false
) {
  display: inline-block;
  @extend .#{"icons" + $extendClassIndex + "_img"};
  @include get_icon($x_f, $y_f, $size_x_f, $size_y_f);

  @if ($x_n, $y_n) {
    &:hover {
      @include get_icon($x_n, $y_n, $size_x_f, $size_y_f);
    }
  }
}

.icons_img {
  background: url("https://music.163.com/style/web2/img/icon.png?7a7e3fe737f9f8c50aefdfeffabe5d20")
    no-repeat;
}

.icons1_img {
  background: url("https://music.163.com/style/web2/img/button2.png?121f168fd59c64de034a737fa613a137")
    no-repeat;
}

.icons2_img {
  background: url("https://music.163.com/style/web2/img/table.png?a58e4187ce8625d374d6085b2c4e7f0f")
    no-repeat;
}

.icons3_img {
  background: url("https://music.163.com/style/web2/img/button.png?6c44aac4f8e2faab560469bf9b7ed1b9")
    no-repeat;
}

.icons4_img {
  background: url("https://music.163.com/style/web2/img/icon2.png?c34052cb37c1e490b43ff505c4e2f71a")
    no-repeat;
}

.icons5_img {
  background: url("https://music.163.com/style/web2/img/iconall.png?3b842806447563578eadc3999414e2e1")
    no-repeat;
}

.icons6_img {
  background: url("https://music.163.com/style/web2/img/coverall.png?544674b7fdb18c4ed7fd416cdd1f1f33")
    no-repeat;
}

.icons7_img {
  background: url("https://music.163.com/style/web2/img/iconall.png?82783b9ec199e0be36d4bfbcd89d22b6")
    no-repeat;
}

.icons8_img {
  background: url("https://music.163.com/style/web2/img/icon.png?6c2f8d104760735b730ad5b31153d531")
    no-repeat;
}

.icons9_img {
  background: url("https://music.163.com/style/web2/img/coverall.png?3505c0904f0a67f8d8ee467beacf8f17")
    no-repeat;
}

.icons10_img {
  background: url("https://music.163.com/style/web2/img/button2.png?28b755c9f690485ed9b4e84553693db5")
    no-repeat;
}

.icons11_img {
  background: url("https://music.163.com/style/web2/img/icon2.png?44737a7a567d8ee25b8bac12f5267376")
    no-repeat;
}

.icons12_img {
  background: url("https://music.163.com/style/web2/img/sprite.png?951fdbfbda929ed4150bb7afc9fa6d1e")
    no-repeat;
}

.icons13_img {
  background: url("https://music.163.com/style/web2/img/ban_mask.png?5b2a30c22e251028922541be7b709b5f")
    no-repeat;
}

.icons14_img {
  background: url("https://music.163.com/style/web2/img/iconall.png?a0797f36204df42efcab5f9a10509e9d")
    no-repeat;
}

.icons15_img {
  background: url("https://music.163.com/style/web2/img/tab.png?641601b89b25d2b32995146a4ac5d2c1")
    no-repeat;
}

.icons16_img {
  background: url("https://music.163.com/style/web2/img/button2.png?17e0eb841988b28b1ec22857bd3d0dda")
    no-repeat;
}

.icons17_img {
  background: url("https://music.163.com/style/web2/img/coverall.png?8a8f8c0c02d3d02e74b78b513cdb6bd3")
    no-repeat;
}

.icons18_img {
  background: url("https://music.163.com/style/web2/img/iconall.png?b9b17f1aab9fa69abd8431abf9dee47a")
    no-repeat;
}

.icons19_img {
  background: url("https://music.163.com/style/web2/img/icon2.png?4719aa5bbfb68e0e401513573bab4511")
    no-repeat;
}

.icons20_img {
  background: url("https://music.163.com/style/web2/img/button2.png?4ebaf9776631e932014ff5bd943e73ca")
    no-repeat;
}

.icons21_img {
  background: url("https://music.163.com/style/web2/img/sprite.png?8f0dccbb571eefd99fd7dfbb7de469db")
    no-repeat;
}

.icons22_img {
  background: url("https://music.163.com/style/web2/img/coverall.png?6a8072e5796e5f559728ab13d717d21d")
    no-repeat;
}

.icons23_img {
  background: url("https://music.163.com/style/web2/img/icon.png?63f08216a41979543294bc2ecf090025")
    no-repeat;
}

.icons24_img {
  background: url("https://music.163.com/style/web2/img/button.png?860d963ab3398f364d486813556d8836")
    no-repeat;
}

.icons25_img {
  background: url("https://music.163.com/style/web2/img/table.png?9665fa3beca263b0b8fc9bc1eb2d97b1")
    no-repeat;
}

.icons26_img {
  background: url("https://music.163.com/style/web2/img/timeline/frd_dyn_sprite.png?797f9da3366aa7ef7909aa04b555a0e0")
    no-repeat;
}

.icons27_img {
  background: url("https://music.163.com/style/web2/img/icon.png?811ff64e869bdc7ac577d0665ff994ae")
    no-repeat;
}

.icons28_img {
  background: url("https://music.163.com/style/web2/img/button.png?0d66ef42fb4f83e2689d08548cda7437")
    no-repeat;
}

.icons29_img {
  background: url("https://music.163.com/style/web2/img/icon2.png?c83d2ab86442ea81de8ea23cded38fdb")
    no-repeat;
}

.icons30_img {
  background: url("https://s2.music.126.net/style/web2/img/layer/layer.png?be45ba8cfc718e885727493d3f4a9802")
    no-repeat;
}

.icons31_img {
  background: url("https://s2.music.126.net/style/web2/img/frame/playbar.png?c9e78ba73e0772a7f4f7f531a0aa94d5")
    no-repeat;
}

.icons32_img {
  background: url("https://s2.music.126.net/style/web2/img/frame/statbar.png?b44c6d25ff3ffa7c2ca26bc949f4c09f")
    no-repeat;
}

.icons33_img {
  background: url("https://s2.music.126.net/style/web2/img/iconall.png?878bc4ddd445a94be4e7a3b48ad1ede5")
    no-repeat;
}

.icons34_img {
  background: url("https://s2.music.126.net/style/web2/img/button2.png?0c14aff87acb4bb0b6643691e595eb62")
    no-repeat;
}

.icons35_img {
  background: url("https://s2.music.126.net/style/web2/img/icon.png?0cf3fedbf40e9ca6b62a54d35a8848b5")
    no-repeat;
}

.icons36_img {
  background: url("https://s2.music.126.net/style/web2/img/button.png?f8d34bb5951684053c92b21819001bdd")
    no-repeat;
}

.icons37_img {
  background: url("https://s2.music.126.net/style/web2/img/logo.png?a0fa0aa89f987186b0435e9896aa8716")
    no-repeat;
}

.icons38_img {
  background: url("https://s2.music.126.net/style/web2/img/coverall.png?265ac32a294935d4dcf3bcd44787fe6a")
    no-repeat;
}

.icons39_img {
  background: url("https://s2.music.126.net/style/web2/img/icon.png?2916f420d7a5ac50cd19024f7c3094ac")
    no-repeat;
}

.icons40_img {
  background: url("https://s2.music.126.net/style/web2/img/icon.png?e71b3dcf5df100518a4b5b9bda074ed6")
    no-repeat;
}

//播放按钮
.play_icon {
  display: inline-block;
  @extend .icons2_img;
  @include get_icon(0, -103, 17, 17);

  &:hover {
    @include get_icon(0, -128, 17, 17);
  }
}

//播放icon
.playlist_icon {
  display: inline-block;
  @extend .icons_img;
  @include get_icon(2.5, -700, 18, 16);

  &:hover {
    @include get_icon(-19.5, -700, 18, 16);
  }
}

//添加到播放列表icon
.addlist_icon {
  display: inline-block;
  @extend .icons2_img;
  @include get_icon(0, -174, 18, 16);

  &:hover {
    @include get_icon(-20, -174, 18, 16);
  }
}

//收藏icon
.collectlist_icon {
  display: inline-block;
  @extend .icons2_img;
  @include get_icon(0, -194, 18, 16);

  &:hover {
    @include get_icon(-20, -194, 18, 16);
  }
}

//下载icon
.downloadlist_icon {
  display: inline-block;
  @extend .icons2_img;
  @include get_icon(-81, -174, 18, 16);

  &:hover {
    @include get_icon(-104, -174, 18, 16);
  }
}

//mv icon
.mv_icon {
  display: inline-block;
  @extend .icons2_img;
  @include get_icon(0, -151, 23, 17);

  &:hover {
    @include get_icon(-30, -151, 23, 17);
  }
}

//排行榜 rank位置变动icon，new为新入选榜单、stay表示位置不变、up、down表示位置变化
.status_icon {
  &_new {
    display: inline-block;
    @extend .icons_img;
    @include get_icon(-67, -283, 16, 17);
    padding-left: 16px;
  }

  &_stay {
    display: inline-block;
    @extend .icons_img;
    @include get_icon(-74, -268, 8, 17);
    font-size: 10px;
    color: #999;
    padding-left: 8px;
  }

  &_up {
    display: inline-block;
    @extend .icons_img;
    @include get_icon(-74, -299, 8, 17);
    font-size: 10px;
    color: #bb2128;
    padding-left: 8px;
  }

  &_down {
    display: inline-block;
    @extend .icons_img;
    @include get_icon(-74, -318, 8, 17);
    font-size: 10px;
    color: #bb2128;
    padding-left: 8px;
  }
}

//一些icon
.icon_ {
  //404组件图片
  &404 {
    @include get_btn(37, 0, -405, 270, 112);
  }

  &smile_face {
    //表情，笑脸
    display: inline-block;
    @extend .icons_img;
    @include get_icon(-40, -490, 18, 18);
  }

  &at {
    //@符号
    display: inline-block;
    @extend .icons_img;
    @include get_icon(-60, -490, 18, 18);
  }

  &btn_comment {
    //评论按钮
    @include get_btn(3, -84, -64, 46, 25, -84, -94);
  }

  &commend {
    //赞
    @include get_btn(4, -150, 0, 15, 14, -150, -20);

    &.active {
      @include get_icon(-170, 0, 15, 14);
    }
  }

  &btn_pagination {
    //重复的属性
    @mixin repectArt {
      line-height: 24px;
      font-size: 12px;
      color: #333;
    }

    //分页 上一页按钮
    &_prev {
      @extend .cur_p;
      @extend .user_ns;
      @include get_btn(3, 0, -560, 71, 24, 0, -590);
      @include repectArt;
      padding-left: 22px;

      &.cannot_click {
        @extend .cur_n_a;
        @include get_btn(3, 0, -620, 71, 24);
        // pointer-events: none;
        color: #cacaca;
      }
    }

    //分页 下一页按钮
    &_next {
      @extend .cur_p;
      @extend .user_ns;
      @include get_btn(3, -75, -560, 71, 24, -75, -590);
      @include repectArt;
      padding-left: 12px;

      &.cannot_click {
        @extend .cur_n_a;
        @include get_btn(3, -75, -620, 71, 24);
      }
    }

    //分页 页面按钮
    &_page {
      @extend .cur_p;
      @extend .user_ns;
      min-width: 22px;
      line-height: 22px;
      font-size: 12px;
      text-align: center;
      padding: 0 8px;
      border-radius: 2px;
      color: #333;
      border: 1px solid #ccc;

      &:hover {
        border-color: #666;
      }

      &.active {
        @include get_btn(3, 0, -650, auto, 22);
        border-color: #a2161b;
        color: #fff;
      }
    }
  }

  //playlist title的热门按钮
  &btn_hot {
    @extend .td_u;
    @include get_btn(3, 0, 0, 46, 29);
    text-align: center;
    line-height: 29px;
    font-size: 12px;
    color: #fff;
    border-radius: 3px;
  }

  //playlist item cover bottom 的背景
  &cov_bot_bg {
    @include get_btn(6, 0, -537, 140, 27);
    display: flex;
  }

  //耳机icon
  &headset {
    @include get_btn(5, 0, -24, 14, 11);
  }

  //playlist item cover bottom 的 播放 icon
  &play {
    @include get_btn(5, 0, 0, 16, 17, 0, -60);
  }

  //封面的mask
  &cover_mask {
    @include get_btn(6, 0, 0, 140, 140);
  }

  //节目播放icon
  &program_play {
    @include get_btn(7, 0, -85, 22, 22);
  }

  //个人主页图标
  &personal {
    @include get_btn(8, 0, -740, 17, 18);
  }

  //封面的mask 130x130
  &cover_mask_130 {
    @include get_btn(6, 0, 0, 130, 130);
  }

  //封面的mask 153x130
  &cover_mask_153x130 {
    @include get_btn(9, 0, -845, 153, 130);
  }

  //封面的mask 143x120
  &cover_mask_143x120 {
    @include get_btn(17, -170, -850, 143, 120);
  }

  //Album 页面的play按钮 28x28
  &album_play_28x28 {
    @include get_btn(7, 0, -140, 28, 28, 0, -170);
  }

  //song 页面 歌曲cover的光碟背景
  &cover_disk {
    @include get_btn(9, -140, -580, 206, 205);
  }

  //song 页面 外链左边的音乐icon ，蓝色
  &music {
    @include get_btn(8, -34, -863, 16, 16);
  }

  //song 页面 单曲icon
  &single_song {
    @include get_btn(8, 0, -463, 54, 24);
  }

  //song 页面 MV icon
  &mv {
    @include get_btn(8, 0, -18, 21, 18);
  }

  //song 页面 播放btn 背景
  &btn_play_bg {
    @include get_btn(10, 0, -633, 66, 31, 0, -719);
  }

  //song 页面 播放btn icon
  &btn_play_icon {
    @include get_btn(10, 0, -1622, 20, 18, -28, -1622);
  }

  //song 页面 新增播放列表btn
  &add_play {
    @include get_btn(10, 0, -1588, 31, 31, -40, -1588);
  }

  //song 页面 收藏btn 背景
  &btn_collect_bg {
    @include get_btn(10, 0, -977, 55, 31, 0, -1063);
  }

  //song 页面 收藏btn 背景
  &btn_share_bg {
    @include get_btn(10, 0, -1225, 55, 31, 0, -1268);
  }

  //song 页面 收藏btn 背景
  &btn_download_bg {
    @include get_btn(10, 0, -2761, 55, 31, 0, -2805);
  }

  //song 页面 评论btn 背景
  &btn_comment_bg {
    @include get_btn(10, 0, -1465, 55, 31, 0, -1508);
  }

  //song 页面 展开箭头
  &expand_arrow {
    @include get_btn(8, -65, -520, 11, 8);

    &.rot {
      transform: rotate(180deg);
    }
  }

  //song 页面 右侧相似歌曲区域 的播放按钮
  &song_play {
    @include get_btn(11, -69, -455, 10, 11);
  }

  //song 页面 右侧相似歌曲区域 的添加播放列表按钮
  &song_add {
    @include get_btn(11, -87, -454, 10, 11);
  }

  //song 页面 右侧网易云音乐app下载区域 bg
  &song_app_download_bg {
    @include get_btn(12, 0, -392, 200, 65);
  }

  //artist 页面 歌手cover bg
  &artist_cover_mask {
    @include get_btn(13, 0, 0, 640, 300);
  }

  //artist 页面 歌手cover 个人主页按钮
  &artist_personal {
    @include get_btn(14, 0, -1156, 96, 32, 0, -1196);
  }

  //artist 页面 歌手cover 收藏按钮
  &artist_collect {
    @include get_btn(14, 0, -500, 76, 32, 0, -540);
  }

  //artist 页面 歌手cover navbar 的背景
  &artist_detail_navbar_bg {
    @include get_btn(15, 0, 0, 640, 39);
    background-repeat: repeat-x;
  }

  //artist 页面 热门作品 filter 按钮 背景
  &artist_filter_bg {
    @include get_btn(16, 0, -59, 102, 31, 0, -140);
  }

  //artist 页面 相关mv mv的mask
  &mv_cover_mask {
    @include get_btn(17, 0, -1170, 137, 103);
  }

  //artist 页面 相关mv mv播放按钮的背景
  &mv_play_bg {
    @include get_btn(18, -30, -135, 44, 44, -30, -85);
  }

  //mv 页面 mv tag
  &mv_tag {
    @include get_btn(19, -230, -480, 29, 18);
  }

  //mv 页面 mv icons
  &mv_icon_like {
    @include get_btn(20, 0, -59, 80, 31, 0, -141);
    width: auto;
    min-width: 58px;

    i.like_icon {
      position: absolute;
      left: 10px;
      top: 6.5px;
      @include get_btn(20, 0, -95, 17, 15);

      &.active {
        @include get_btn(20, -30, -95, 17, 15);
      }
    }
  }

  &mv_icon_collect {
    @include get_btn(20, 0, -977, 70, 31, 0, -1063);
    width: auto;
    min-width: 58px;
  }

  &mv_icon_share {
    @include get_btn(20, 0, -1225, 76, 31, 0, -1268);
    width: auto;
    min-width: 58px;
  }

  //mv详情页 相关推荐组件的 摄影机icon
  &mv_camera {
    @include get_btn(19, -60, -310, 15, 10);
  }

  //mv详情页 公众号
  &mv_qrcode {
    @include get_btn(21, 0, -300, 72, 72);
  }

  //playlist 歌单详情页 歌手cover bg
  &playlist_cover_bg {
    @include get_btn(22, 0, -1285, 208, 208);
  }

  //playlist 歌单tag
  &playlist_tag {
    @include get_btn(23, 0, -243, 54, 24);
  }

  //playlist 歌单 feature 收藏、分享、下载、评论 按钮
  &playlist_ {
    @mixin mixinStyle {
      width: auto;

      &:hover {
        width: auto;
      }

      span {
        font-size: 12px;
        color: #333;
        line-height: 31px;
        margin: 0 5px 0 30px;
      }

      i.icon_close {
        top: 0;
        left: 0;
        width: calc(100% + 3px);
        height: 31px;
        @extend .icons20_img;
        background-position: right -1020px;

        &:hover {
          background-position: right -1106px;
        }
      }
    }

    &collect {
      @include get_btn(20, 0, -977, 54, 31, 0, -1063);
      @include mixinStyle;
    }

    &share {
      @include get_btn(20, 0, -1225, 54, 31, 0, -1268);
      @include mixinStyle;
    }

    &download {
      @include get_btn(20, 0, -2761, 54, 31, 0, -2805);
      @include mixinStyle;
    }

    &comment {
      @include get_btn(20, 0, -1465, 54, 31, 0, -1508);
      @include mixinStyle;
    }

    &t_tag {
      @include get_btn(20, 0, 0, 54, 22, 0, -1400);
      @include mixinStyle;

      span {
        position: relative;
        color: #777;
        line-height: 22px;
        margin: 0 6px 0 12px;
        z-index: 5;
      }

      i.icon_close {
        width: calc(100% + 6px);
        height: 22px;
        background-position: right -27px;
      }

      &:hover {
        i.icon_close {
          background-position: right -1430px;
        }
      }
    }

    //歌单分类
    &selector_ {
      //选择按钮
      &btn {
        @include get_btn(34, 0, -59, 86, 31, 0, -141);
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          right: -5px;
          @include get_btn(34, -245, -100, 5, 31);
        }
        &:hover::after {
          background-position: -245px -182px;
        }

        &_all {
          @include get_btn(36, 0, -64, 75, 26);
        }
      }
      &_arrow_d {
        @include get_btn(35, -70, -543, 8, 5);
        margin-left: 5px;
      }
      &c {
        &0 {
          @include get_btn(35, -20, -735, 23, 23);
        }
        &1 {
          @include get_btn(35, 0, -60, 24, 24);
        }
        &2 {
          @include get_btn(35, 0, -88, 24, 24);
        }
        &3 {
          @include get_btn(35, 0, -117, 24, 24);
        }
        &4 {
          @include get_btn(35, 0, -141, 24, 24);
        }
      }
    }
  }

  &user_ {
    //等级
    &level {
      @include get_btn(19, -135, -190, 46, 19);
      width: auto;
      margin-right: 9px;

      &:hover {
        width: auto;
      }

      span {
        margin: 0 2px 0 29px;
        line-height: 21px;
        color: #e03a24;
        font-weight: bold;
        font-style: italic;
      }

      i.close {
        top: 0;
        right: -9px;
        @extend .icons19_img;
        background-position: -191px -190px;
        width: 9px;
        height: 19px;
      }
    }

    &sex_ {
      &m {
        @include get_btn(23, -41, -57, 20, 20);
      }

      &w {
        @include get_btn(23, -41, -27, 20, 20);
      }
    }

    &email {
      @include get_btn(24, 0, -810, 75, 31, 0, -845);
      margin-left: 10px;
      line-height: 31px;
      padding-left: 30px;
      font-size: 12px;
      color: #333;
    }

    &follow {
      @include get_btn(24, 0, -720, 70, 31, -80, -720);
      margin-left: 10px;
      line-height: 31px;
      padding-left: 30px;
      font-size: 12px;
      color: #fff;
    }

    &record_ {
      &add {
        @include get_btn(23, 3, -700, 18, 16, -19, -700);
      }

      &collect {
        @include get_btn(25, 0, -174, 18, 16, -20, -174);
      }

      &share {
        @include get_btn(25, 0, -195, 18, 16, -20, -195);
      }

      &download {
        @include get_btn(25, -81, -174, 18, 16, -104, -174);
      }
    }

    &liked {
      @include get_btn(26, 0, -20, 14, 14);
    }

    &follows_ {
      &gender_ {
        &m {
          @include get_btn(27, -70, -20, 14, 15);
        }

        &w {
          @include get_btn(27, -70, 0, 14, 15);
        }
      }

      &v {
        @include get_btn(27, 0, 1, 11, 13);
      }

      &follow_btn {
        @include get_btn(28, 0, -720, 70, 31, -80, -720);
      }
    }

    &home_ {
      &auth_ {
        &4,
        &10 {
          @include get_btn(29, -150, -480, 68, 20);
        }

        &2 {
          @include get_btn(29, 0, -480, 68, 20);
        }

        &200,
        &204,
        &207 {
          @include get_btn(29, -75, -480, 68, 20);
        }
      }

      &empty {
        @include get_btn(27, 0, -347, 64, 50);
      }
    }
  }

  &popup_ {
    &close {
      @include get_btn(30, 0, -95, 10, 10);
    }
  }

  &player_ {
    &bg {
      @include get_btn(31, 0, 0, 0, 53);
      width: 100vw;
      height: 53px;
      padding-right: 67px;

      &::after {
        content: "";
        position: absolute;
        width: 67px;
        height: 53px;
        top: 0;
        right: 0;
        background: #f5f5f5;
        z-index: 1;
      }

      &:hover {
        width: 100vw;
        height: 53px;
      }

      background-repeat: repeat-x;
    }

    &hand_bg {
      @include get_btn(31, 0, -386, 67, 61);
      z-index: 2;
    }

    &last {
      @include get_btn(31, 0, -130, 28, 28, -30, -130);
    }

    &play {
      @include get_btn(31, 0, -204, 36, 36, -40, -204);
    }

    &pause {
      @include get_btn(31, 0, -165, 36, 36, -40, -165);
    }

    &next {
      @include get_btn(31, -80, -130, 28, 28, -110, -130);
    }

    &lock_0 {
      @include get_btn(31, -80, -380, 18, 18, -80, -400);
    }

    &lock_1 {
      @include get_btn(31, -100, -380, 18, 18, -100, -400);
    }

    &cover_mask {
      @include get_btn(31, 0, -80, 34, 34);
      top: 0;
      left: 0;
    }

    &mv {
      @include get_btn(31, 0, -57, 19, 17, -20, -57);
    }

    &link {
      @include get_btn(31, -110, -103, 14, 15, -130, -103);
    }

    &process_ {
      &bg {
        @include get_btn(32, 0, 0, 466, 9);
        background-position: right 0;
      }

      &load {
        @include get_btn(32, 0, -30, 466, 9);
        background-position: right -30px;
      }

      &done {
        @include get_btn(32, 0, -66, 466, 9);

        &::after {
          content: "";
          position: absolute;
          @include get_btn(33, 0, -250, 22, 24);
          top: -7px;
          right: -13px;
        }
      }
    }

    &lyric {
      display: inline-block;
      background: url("https://p1.music.126.net/DLVi_1eymwAX8gDunfd2bg==/109951165524394991")
        no-repeat 0 0;
      width: 25px;
      height: 25px;

      &:hover {
        background-position: 0 -25px;
      }
    }

    &collect {
      @include get_btn(31, -88, -163, 25, 25, -88, -189);

      &_n {
        @include get_btn(31, -88, -214, 25, 25);
      }
    }

    &share {
      @include get_btn(31, -114, -163, 25, 25, -114, -189);

      &_n {
        @include get_btn(31, -114, -214, 25, 25);
      }
    }

    &voice {
      @include get_btn(31, -2, -248, 25, 25, -31, -248);

      &_control {
        @include get_btn(31, 0, -503, 32, 113);
      }

      &_cur {
        @include get_btn(31, -40, -250, 4, 0);
        background-position: -40px bottom;

        &_dot {
          @include get_btn(33, -40, -250, 18, 20);
        }
      }
    }

    &space {
      @include get_btn(31, -147, -238, 13, 46);
    }

    &mode_ {
      &loop {
        @include get_btn(31, -3, -344, 25, 25, -33, -344);
      }

      &random {
        @include get_btn(31, -66, -248, 25, 25, -93, -248);
      }

      &one {
        @include get_btn(31, -66, -344, 25, 25, -93, -344);
      }

      &show_bg {
        @include get_btn(31, 0, -457, 81, 39);
      }
    }

    &list {
      @include get_btn(31, -42, -68, 59, 25, -42, -98);
      padding-left: 25px;
      line-height: 27px;
    }
  }

  //Album 页面
  &album_ {
    &head_ {
      &cover_mask {
        @include get_btn(38, 0, -986, 209, 177);
      }
      &u_icon {
        @include get_btn(39, 0, -186, 54, 24);
      }
    }
  }

  //主播电台页面
  &djradio_{
    &category_user{
      @include get_btn(40, -50, -300, 14, 15);
    }
  }
}
